<!--
 * @Author: your name
 * @Date: 2021-12-15 16:53:10
 * @LastEditTime: 2021-12-16 20:28:28
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \day7\my-app\src\views\Home\Oreder.vue
-->
/<template>
    <div class="oreder">
        <Left :list="list" :activeIndex="activeIndex"/>
        <Right :list="list" :activeIndex="activeIndex"/>
    </div>
</template>

<script>

import {mapState,mapActions} from "vuex"
// 引入左侧和右侧
import Left from "../../components/Left.vue"
import Right from "../../components/Right.vue"

export default {
    components: {
        Left,
        Right
    },
    computed: {
        ...mapState(["list"])
    },
    methods: {
        ...mapActions(["getList"]),
    },
    mounted () {
        this.getList()
        this.bus.$on('changeIndex', (index) => {
            this.activeIndex=index
        })
    },
    data () {
        return {
            activeIndex:0
        }
    }
}
</script>

<style lang="scss" scoped>
.oreder{
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    .left{
        width: 120px;
        height: 100%;
    }
    .right{
        flex: 1;
        height: 100%;
        overflow-y: scroll;
    }
    .right::-webkit-scrollbar{
        display: none;
    }
}
</style>